
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue'); 
import Vue from 'vue'

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

import Toaster from 'v-toaster'
import 'v-toaster/dist/v-toaster.css'
Vue.use(Toaster, {timeout: 5000})


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('message', require('./components/Message.vue'));
 
const app = new Vue({
    el: '#app',
    data:{
        message:'',
        chat:{
            message:[],
            user:[],
            color:[],
            times:[]
        },
        typing:'', 
        numberOfUsers:0
    },
    methods:{
        send(){ 
            this.chat.message.push(this.message)
            this.chat.color.push('success')
            this.chat.user.push('You')
            this.chat.times.push(this.getTime())
            axios.post('/send', {
            message:  this.message, 
            chat : this.chat
          })
          .then(response => {
            console.log(response);
          })
          .catch( error => {
            console.log(error);
        });
          this.message = '' 
        },
        getTime(){
            let time = new Date();
            return time.getHours() + ':' + time.getMinutes();
        },
        getOldMessage(){
             axios.post('/getOldMessage')
              .then(response => {
                if(response.data != '')
                {
                    this.chat = response.data;
                }
                console.log(response);
              })
              .catch( error => {
                console.log(error);
            });
        }
    } ,
    watch:{
        message(){
            Echo.private('chat')
            .whisper('typing', {
                name: this.message
            });
        }
    },
    mounted(){
        this.getOldMessage()
        Echo.private('chat')
        .listen('ChatEvent', (e) => {
            this.chat.message.push(e.message) 
            this.chat.user.push(e.user) 
            this.chat.color.push('primary')
            this.chat.times.push(this.getTime())
              axios.post('/saveToSession',{
                chat : this.chat
              })
              .then(response => {
                if(response.data != '')
                {
                    this.chat = response.data;
                }
                console.log(response);
              })
              .catch( error => {
                console.log(error);
            });
            
        })
        .listenForWhisper('typing', (e) => {
            if (e.name != '') { 
                this.typing='正在输入...'
            }else{
                this.typing=''
            } 

        });
        Echo.join(`chat`)
        .here((users) => {
           this.numberOfUsers = users.length
        })
        .joining((user) => {
            this.numberOfUsers += 1
            this.$toaster.info(user.name + '加入了房间.');

        })
        .leaving((user) => {
            this.numberOfUsers -= 1
            this.$toaster.success(user.name + '离开了房间.')

        });
    },
     

});
